<template>
  <div class="sub-form-item" :class="bottom ? 'border-bottom':''">
    <div class="sub-form-item-title">{{title}}</div>
    <el-input v-model="val" placeholder="请输入" @input="valueChange"></el-input>
  </div>
</template>

<script>
export default {
  data(){
    return{
      val:''
    }
  },
  props:{
    title:{
      typeof:String,
      default:''
    },
    bottom:{
      default:true,
      typeof:Boolean
    },
    value:[String,Number]
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  watch:{
    value(newVal) {
				this.val = newVal
    },
  },
  methods:{
    valueChange(val){
      this.$emit('change',val)
    }
  }
}
</script>

<style lang="less" scoped>
.sub-form-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  font-size: 14px;
  padding: 5px 10px;
  &-title{
    white-space: nowrap;
    width: 70%;
  }
}
.border-bottom{
  border-bottom: solid 1px #D8D8D8;
}
</style>
